<template>
    <div class="list">
        <div class="list-img">
            <img src="http://wddxwdc.tffcs.com/image/dxkfr/whxd/banner.png" alt="banner图片">
        </div>
        <div class="content">
            <div class="tit-img"><img src="../assets/xdtj.png" alt=""></div>
            <div class="list-box">
                <div class="list-box-item" v-for="item in items" :key="item.name" @click="btnClick(item.id)">
                    <div class="list-box-item-top"><img :src="item.url[0]" alt=""></div>
                    <div class="list-box-item-bottom">
                        <p class="title">{{ item.name }}</p>
                        <p class="remark">{{ item.remark }}</p>
                    </div>
                   </div>

                </div>
            </div>
        </div>
</template>
<script setup>
import { ref } from 'vue';
import data from '../data';
import { useRouter } from 'vue-router';
const router=useRouter()



const items = ref(data);
const btnClick = (id) =>{
    console.log('btnClick')
    router.push({path:'/whxdListDetail',query:{id}})
}
</script>
<style scoped lang="scss">
.list {
    background-color: #fff;

    p {
        margin: 0;
    }

    .list-img {
        img {
            width: 100%;
        }

        >span {
            color: royalblue;
        }
    }

    .content {
        padding: 0 14px;

        .tit-img {
            display: flex;
            justify-content: center;

            img {
            width: 60%;
        }
    }

    .list-box {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        .list-box-item {
            width: 48%;
            display: flex;
            flex-direction: column;
            margin-top: 6px;
            border: 0.5px solid rgba(0, 0, 0, 1);
            border-radius: 8px;

        .list-box-item-top {
            img{
                width: 168px; 
                height: 158px;
                    
                }
        }

        .list-box-item-bottom {
            margin: 4px 4px 12px 4px;

            .title {
                font-size: 14px;
                font-weight: bold;
            }

            .remark {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p {
                font-size: 12px;
                color: #555;
            }
        }
    }
    .list-box-item:nth-child(even) {
        margin-left: 10px;
        margin-top: 30px;
    }
}
}
}
</style>